<script setup>
import {onMounted, ref} from 'vue'
import PageConfig from "components/PageConfig.vue";

let tab = ref('waiting')
let splitterModel = ref(10)
onMounted(() => {
})
</script>

<template>
  <q-page class="q-pa-md">
    <q-splitter v-model="splitterModel">

      <template v-slot:before>
        <q-tabs
          v-model="tab"
          vertical
          class="text-teal"
        >
          <q-tab name="waiting" icon="description" label="waiting"/>
          <q-tab name="login" icon="login" label="login"/>
          <q-tab name="index" icon="view_list" label="index"/>
          <q-tab name="task" icon="task" label="task"/>
          <q-tab name="process" icon="running_with_errors" label="process"/>
          <q-tab name="rank" icon="thumb_up" label="rank"/>
          <q-tab name="plugin" icon="extension" label="plugin"/>
        </q-tabs>
      </template>

      <template v-slot:after>
        <q-tab-panels
          v-model="tab"
          animated
          swipeable
          vertical
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="waiting">
            <page-config page="waiting"></page-config>
          </q-tab-panel>

          <q-tab-panel name="login">
            <page-config page="login"></page-config>
          </q-tab-panel>

          <q-tab-panel name="index">
            <page-config page="index"></page-config>
          </q-tab-panel>

          <q-tab-panel name="task">
            <page-config page="task"></page-config>
          </q-tab-panel>

          <q-tab-panel name="process">
            <page-config page="process"></page-config>
          </q-tab-panel>

          <q-tab-panel name="rank">
            <page-config page="rank"></page-config>
          </q-tab-panel>

          <q-tab-panel name="plugin">
            <page-config page="plugin"></page-config>
          </q-tab-panel>

       </q-tab-panels>
      </template>

    </q-splitter>
  </q-page>
</template>

<style scoped lang="sass">

</style>
